<script setup lang="ts">
import { reactive } from 'vue';

import Left from "./components/left.vue";
import Content from "./components/content.vue";
import Task from "./components/task.vue";

// import Right from "./components/right.vue";
import { useLayoutStore } from '@/stores/useLayout';

import {
  Close,
} from '@element-plus/icons-vue'

const layoutStore = useLayoutStore()

// const list = reactive([])
const onClose = ()=>{
  layoutStore.changePreviewShow(false)
}

</script>

<template>
  <Teleport to="body">
    <div class="ps" v-if="layoutStore.previewShow">
      <el-button class="close-btn" :icon="Close" circle @click="onClose"/>
      <div class="ctx" :style="{background: layoutStore.background}">

        <!-- <Content :tasks="layoutStore.list" direction="column"></Content> -->

        <Task v-for="item in layoutStore.list" :key="item.id" :view="item"></Task>


      </div>
      
    </div>
  </Teleport>
</template>

<style lang="less" scoped>
.ps{
  // display: flex;
  // justify-content: center;
  // align-items: center;
  background: rgba(0, 0, 0, 0.9);
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  z-index: 10;
  .close-btn{
    position: fixed;
    z-index: 1;
    left: 10px;
    top: 10px;
  }
  .ctx{
    width: 1080px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: auto;
    background: #fff;
  }
}
</style>
